<template>
	<div id="app">
		<!-- 后台弹出头像弹出框 -->
		<el-dialog title="请上传图片" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-upload class="upload-demo" drag action="http://localhost:8080/api/mall/OSSFileUploadServlet"
				:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

		<el-container>
			<el-header>
				<h1 style="float: left;"><a @click="setpath()" href="/#/Index"
						style="text-decoration: none; color: bisque;" title="点我进入到首页">百货商城</a><span
						style=" color: bisque;">后台管理系统</span></h1>
				<h2 style="float: left; margin-left: 20px;"><span style="color: greenyellow">欢迎你 </span><span style="color: red;"> {{username}}</span></h2>
				<div style="float: left; margin-left: 20px; margin-top: 15px;" title="点我更换头像" @click="changeFile()">
					<el-avatar :src="touxiang"></el-avatar>
				</div>
				<el-button type="danger" style="float: right; margin-top: 10px;" @click="logout()">退出</el-button>
			</el-header>
			<el-container style="height: 580px;">
				<el-aside width="200px">
					<el-menu :router="true" v-loading="loading" background-color="#545c64" text-color="#fff"
						active-text-color="#ffd04b">
						<el-submenu :index="item.permission_id +''" v-for="item in menuList" :key="item.permission_id">
							<!-- 一级菜单的模板区域 -->
							<template slot="title">
								<!-- 图标 -->
								<i :class="item.img"></i>
								<!-- 文本 -->
								<span style="font-size: 18px; color: bisque;">{{item.name}}</span>
							</template>
							<!-- 二级菜单 -->
							<el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
								@click="saveNavState(subItem.path)">
								<!-- 二级菜单的模板区域 -->
								<template slot="title">
									<!-- 图标 -->
									<i :class="subItem.img"></i>
									<!-- 文本 -->
									<span>{{subItem.name}}</span>
								</template>
							</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-container v-loading="loading">
					<el-main>
						<router-view></router-view>
					</el-main>
				</el-container>
			</el-container>
		</el-container>


	</div>
</template>
<script>
	export default {
		name: 'App',
		// watch: {
		// 	//activePath改变就会跳转页面
		// 	activePath(val) {
		// 		console.log('val', val)
		// 		this.$router.push({
		// 			path: val
		// 		})
		// 	}
		// },
		data() {
			return {
				dialogVisible: false,
				//记录token
				access_token: "",
				//头像
				touxiang: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				//左侧菜单数据
				menuList: [],
				//是否折叠
				isCollapse: false,
				//被激活的链接地址
				activePath: '',
				//当前登录用户名
				username: '',
				loading: true,
				role_id: ""
			}
		},
		mounted() {
			// if (this.getMenuList) {
				console.log('mounted的时候 menuList为空')
				this.getMenuList(this.role_id);
				console.log(this.menuList)
			// }
			//全局事件绑定
			console.log('绑定了全局事件总线函数 refreshMenu')
			console.log('this.$bus', this.$bus)
			this.$bus.$on('refreshMenu', this.getMenuList);

		},
		beforeDestroy() {
			console.log('销售之间事件要移除掉')
			this.$bus.$off('refreshMenu');

		},
		created() {
			console.log("main组件被创建")
			this.access_token = window.sessionStorage.getItem("token");
			this.role_id = window.sessionStorage.getItem('role_id');
			this.getMenuList(this.role_id);

			//this.touxiang = window.sessionStorage.getItem('touxiang');
			this.username = window.sessionStorage.getItem('username');
			this.activePath = window.sessionStorage.getItem('activePath');

			if (window.sessionStorage.getItem('touxiang')) {
				//有头像用头像,没有头像的用默认值
				this.touxiang = window.sessionStorage.getItem('touxiang');
			}

			console.log('this.activePath', this.activePath)
			this.$router.push({
				path: this.activePath
			})
			//console.log('11111111111111111111 this.menuList', this.menuList)


		},
		methods: {
			handleClose(){},
			//图片上传相关回调
			handleAvatarSuccess: function(res, file) {
				if (res.code == 0) {
					//图片上传成功关闭上传框
					this.dialogVisible = false;
					//取出图片的url地址
					this.touxiang = res.data;

					//还要往session里面存一份
					window.sessionStorage.setItem("touxiang",this.touxiang);
					//文件上传成功后 ，获得图片的链接 还要发送异步请求修改数据库中的图片路径

					console.log("获得返回路径后执行的操作")
					this.updatePathByUserId();
				}

			},
			beforeAvatarUpload: function(file) {
				//文件上传前对文件的大小和类型做检查
				const isJPGAndPNg = file.type.indexOf('image') >= 0 ? true : false;
				const isLt500K = file.size / 1024 <= 500;
				if (!isJPGAndPNg) {
					this.$message.error('只能上传jpg/png文件!');
				}
				if (!isLt500K) {
					this.$message.error('上传头像图片大小不能超过 500kb!');
				}
				return isJPGAndPNg && isLt500K;
			},
			//图片上传成功回调后要改数据库中的图片路径
			updatePathByUserId: function() {
				let _this = this;
				
				let url = "/api/mall/UserServlet2.do?method=updatePathByUserId&access_token=" + this
					.access_token;
				this.$http.get(url, {
					params: {
						file: _this.touxiang,
						username:_this.username
					}
				}).then(function(response) {
					console.log("getMenuList服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.$notify({
							title: '提示',
							message: "更改头像成功",
							duration: 2000
						});
					} else {
						_this.$message(response.data.msg)
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});
				
				})
				
			},
			changeFile() {
				// 上传头衔弹出框打开
				this.dialogVisible = true;
			},
			setpath() {
				window.sessionStorage.setItem("activePath", '/Index')
			},
			//保存链接的激活状态
			saveNavState(activePath) {
				window.sessionStorage.setItem('activePath', activePath);
				this.activePath = activePath;
			},
			//根据角色id获取应有的权限菜单
			getMenuList: async function(roleId) {
				if (!roleId) {
					roleId = window.sessionStorage.getItem('role_id')
				}
				console.log("getMenuList 方法被调用")
				let _this = this;
				let url = "/api/mall/RoleServlet.do?method=getPermissionListByRoleId&access_token=" + this
					.access_token;

				await this.$http.get(url, {
					params: {
						roleId: roleId,
					}
				}).then(function(response) {
					console.log("getMenuList服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.menuList = response.data.data;
					} else {
						_this.$message(response.data.msg)
					}
				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
				console.log("加载菜单信息完毕")
				console.log('222222 this.menuList', this.menuList)
				//加载完毕之后才不开始转
				this.loading = false;

			},
			logout: function() {
				//清空token
				window.sessionStorage.clear();
				//跳转登陆页
				this.$router.push("/login");
			}
		}
	}
</script>

<style>
	el-container {
		height: 100%;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
	}
</style>
